<template>
	<Container>
		<view class="header">
			<view class="article" @tap="tap(item, index)" hover-class="touch" hover-stay-time="300" v-for="(item, index) in assignment.answerTexts" :key="index">
				<view :style="{ background: color[item] }"></view>
				<SuccessIcon :bottom="20" :right="20" v-if="chooses[index] === 'select'" />
			</view>
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	mixins: [mixins],
	components: { Question, Container, SuccessIcon },
	data() {
		return {
			color: Object.freeze({
				红色: '#FF754A',
				蓝色: '#588FFF',
				黑色: '#3E3A39',
				黄色: '#FFF3A0'
			}),
			current: 0,
			timer: null
		}
	},
	watch: {
		questionPress: function(bool) {
			if (!bool) this.textAudio()
		}
	},
	methods: {
		tap: function(item, index) {
			if (!this.isComplete) return
			clearTimeout(this.timer)
			this.touchAudio()
			this.optionStatus('select', index)
			this.isComplete = false
			const timer = setTimeout(() => {
				this.optionStatus('', index)
				const isSure = item === this.assignment.optionArticles[this.current].target
				this.next(isSure)
			}, 2000)
			this.$once('hook:beforeDestory', function() {
				clearTimeout(timer)
			})
		},
		next: function(bool) {
			this.choosesKey.push(bool)
			if (this.current === this.assignment.optionArticles.length - 1) {
				const isSure = this.choosesKey.every(item => {
					return item
				})
				this.$parent.next({
					isSure: isSure
				})
				return
			}
			this.current++
			this.textAudio()
		},
		textAudio: async function() {
			const data = await this.parseTextAudio({
				text: this.assignment.optionArticles[this.current].name,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.isComplete = false
				},
				end: () => {
					this.isComplete = true
					this.timer = setTimeout(() => {
						const isSure = this.assignment.optionArticles[this.current].target
						this.next(!isSure)
					}, 2500)
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	flex-wrap wrap
	align-content center
	position relative
	.article
		width 50%
		height 40%
		display flex
		justify-content center
		align-items center
		position relative
		transition all 0.3s
		view
			width 250rpx
			height 250rpx
			background red
			border-radius 50%
			box-sizing border-box
			border 5rpx solid white
			box-shadow 2rpx 2rpx 4rpx #C4C4C4
</style>
